
<div class="main reportes">

	<h2>Casos y mensajes nuevos por hora</h2>
	
		<form id="fechas">
			
			<fieldset>
				<p>Comprarar el dia:</p>
				<input id="fecha_inicio" data-role="datepicker" class="datepicker" name="opciones[fechas][fin]" type="text" value="2011-05-04"/>
				<ul class="cifras">
					<li>
						Casos
						<span class="big" data-value="casos_total_fin"></span>
						<span id="porcentaje_casos"></span>
					</li>
					<li>
						Mensajes
						<span class="big" data-value="mensajes_total_fin"></span>
						<span id="porcentaje_mensajes"></span>
					</li>
				</ul>
			</fieldset>
			
			<fieldset>
				<p>con el dia:</p>
				<input id="fecha_fin" data-role="datepicker" class="datepicker" name="opciones[fechas][inicio]" type="text" value="2011-05-04"/>
				<ul class="cifras">
					<li>
						Casos
						<span class="big" data-value="casos_total_inicio"></span>
					</li>
					<li>
						Mensajes
						<span class="big" data-value="mensajes_total_inicio"></span>
					</li>
				</ul>
			</fieldset>
			
			<fieldset>
				<p>en las areas ( <a data-action="checkall">Todas</a> | <a data-action="checknone">Ninguna</a> ):</p>
				<? foreach($areas as $key_area => $value_area): ?>
					<label><input type="checkbox" checked="checked" name="opciones[areas]" value="<?=$value_area['id_area']?>"/><?=ucfirst($value_area['area'])?></label>
				<? endforeach;?>
			</fieldset>
			
		</form>
	
	<div class="space clear divide paddingtop"></div>
	
	<div class="grafico">
		<a><img/></a>
	</div>
	
	<div class="minicon">
		<a class="etable">Exportar a Excel</a>
		<a class="add" data-toggle="detalles">Ver detalles</a>
		<div class="hide todo" data-content="detalles">
			<div class="minispace"></div>
			<ul class="list"></ul>
		</div>
	</div>
	
	<div class="clear"></div>
	
	<div class="foot minicon"><a class="back" href="/ss/home/">Volver al listado</a></div>

</div>

<div class="sidebar"></div>

<script>

$(function() {

	getStats();

	$('[data-role="datepicker"]').change(function() {
		getStats();
	});
	
	$('img', '.grafico').click(function() {
		var src = $(this).attr('src');
		$.modal.alert(
			'<div class="zoom"><img src="' + src + '"/></div>'
		);
	});
	
	$('[data-action="checkall"]').click(function () {
		$('[name="opciones[areas]"]').attr('checked', 'checked');
		getStats();
	});
		
	$('[data-action="checknone"]').click(function () {
		$('[name="opciones[areas]"]').removeAttr('checked');
		getStats();
	});
	
	$('[name="opciones[areas]"]').click(function() {
		getStats();
	});
	
});


function getStats() {
	$.ajax({
		type : 'POST',
		dataType: 'json',
		beforeSend: function() {
			$('img', '.grafico').attr('src', '')
		},
		data: $('#fechas').serialize(),
		url : '/includes/controller/grafico.php',
		success : function(data) {
			refreshStats(data);
		}
	});
}

function refreshStats(data) {

		$('img', '.grafico').attr('src', data.url);
		
		$('#porcentaje_casos').html(function() {
			if (data.porcentaje.casos > 0)
				return '<img src="/images/icon/arrow_up.gif"/> ' + Math.abs(data.porcentaje.casos) + '%';
			else
				return '<img src="/images/icon/arrow_down.gif"/> ' + Math.abs(data.porcentaje.casos) + '%';
		});
		
		$('#porcentaje_mensajes').html(function() {
			if (data.porcentaje.mensajes > 0)
				return '<img src="/images/icon/arrow_up.gif"/> ' + Math.abs(data.porcentaje.mensajes) + '%';
			else
				return '<img src="/images/icon/arrow_down.gif"/> ' + Math.abs(data.porcentaje.mensajes) + '%';
		});
		
		$("[data-value=casos_total_fin]").text(data.fin.casos_total);
		$("[data-value=casos_total_inicio]").text(data.inicio.casos_total);
		$("[data-value=mensajes_total_fin]").text(data.fin.mensajes_total);
		$("[data-value=mensajes_total_inicio]").text(data.inicio.mensajes_total);
		
		var html = '<li><p><b>Hora</b></p><p><b>' + data.inicio.fecha + '</b></p><p><b>' + data.fin.fecha + '</b></p></b></li>';
		
		for (caso in data.fin.casos) {
			html += '<li><p>' + caso + ' HS </p>';
			html += '<p>' + data.inicio.casos[caso] + '</p>';
			html += '<p>' + data.fin.casos[caso] + '</p></li>';
		}
		
		$('ul', '[data-content="detalles"]').html('').append(html);
		
}


</script>
